<template>
	<view class="content">
		<view class="img">
			<image style="width: 100%; height: 435rpx;"
				src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/%E8%8D%94%E8%87%B4%E5%AE%B6%E6%95%99/pay.png" mode="">
			</image>
		</view>
		<view class="form">
			<view style="padding: 0 30rpx;">
				<view class="order">
					<view class="orderInduce">
						<view class="list" style="">
							<text class="color">购课次数</text>
							<view class="sel">
								<!-- <text>{{num?num:'请输入'}}</text> -->
								<picker mode="selector" range-key="label" @change="selectNum"
									:range="list" style="width: 170rpx;">
									<view class="view"
										style="display: flex; justify-content: space-between;align-items: center;">
										<view style="font-size: 20rpx;">{{num||'请选择'}}</view>
										<text class="icon-xiangxia iconfont"></text>
									</view>
								</picker>
							</view>
						</view>
						<view class="list" style="">
							<text class="color">课程时长</text>
							<view class="sel" >
								<!-- <text>{{time?time:'请输入'}}</text>
								<text class="icon-xiangxia iconfont"></text> -->
								<picker mode="selector" range-key="label" @change="selecTime"
									:range="list1" style="width: 170rpx;">
									<view class="view"
										style="display: flex; justify-content: space-between;align-items: center;">
										<view style="font-size: 20rpx;">{{time||'请选择'}}</view>
										<text class="icon-xiangxia iconfont"></text>
									</view>
								</picker>
							</view>
						</view>
						<view class="list">
							<text class="color">课费时薪</text>
							<!-- <text class="orgin">{{orderDetail.auditParentPrice}}</text> -->
							<text class="orgin">{{orderDetail.auditParentPrice}}</text>
						</view>

						<view class="list">
							<text class="color">总计课费</text>
							<text class="orgin">{{price}}</text>
						</view>
					<!-- 	<view class="list">
							<text class="color">账户余额</text>
							<text class="orgin">0</text>
						</view>
						<view class="list">
							<text class="color">是否使用账户余额</text>
							<u-checkbox-group>
								<u-checkbox v-model="checked"></u-checkbox>
							</u-checkbox-group>
						</view> -->
					</view>
				</view>
			</view>
			<view class="danger">
				*切勿线下交易，资金不安全教学无保障
			</view>
			<view class="pay">
				<view style="height: 149rpx;display: flex;align-items: center;">
					<text style="font-size: 28rpx;color: #333333;">需支付</text>
					<text
						style="width: 60rpx; text-align: center; font-size: 36rpx;font-weight: bold;color: #FF6B55;position: relative;bottom: -14rpx;">￥</text>
					<text style="font-size: 60rpx;font-weight: bold;color: #FF6B55;">{{price}}</text>
				</view>
				<view class="dopay" @tap="ruYOng">
					立即支付
				</view>
			</view>
		</view>
		<u-select @confirm="confirm" v-model="show" :list="list"></u-select>
		<u-select @confirm="confirm1" v-model="show1" :list="list1"></u-select>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	export default {
		data() {
			return {
				payDetail: {},
				checked: false,
				show: false,
				show1: false,
				num: '',
				time: '',
				list: [],
				list1: [],
				id: "",
				orderDetail: {},
				price: 0,
				timeValue: '',
				numValue: '',
				counsellingTimes: '',
				counsellingDuration: ''
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getOrder()
			this.fudaoTime()
			this.fudaoNum()
			// this.payDetail = JSON.parse(options.pay)
			// console.log(options);
		},
		methods: {
			async getOrder() {
				this.orderDetail = await this.$u.api.getOrderDetail({
					id: this.id
				})
				// this.time = this.orderDetail.counsellingDurationName
			},
			async fudaoTime() {
				this.list1 = await this.$u.api.getCate({
					categoryType: 5
				})
				this.list1.map(item => {
					console.log(item);
					item.label = item.categoryName
					item.value = item.id
				})
			},
			async fudaoNum() {
				this.list = await this.$u.api.getCate({
					categoryType: 4
				})
				this.list.map(item => {
					console.log(item);
					item.label = item.categoryName
					item.value = item.id
				})
			},
			ruYOng() {
				this.$u.api.ruYOng({
					orderId: this.id,
					totalAmount: this.price,
					counsellingDuration: this.counsellingDuration,
					counsellingTimes: this.counsellingTimes
				}).then(data => {
					utils.doPay(data, function(a) {
						if (a) {
							uni.showToast({
								title: '恭喜支付成功',
								icon: ''
							})
							uni.navigateBack({
								delta: 1
							})
						} else {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				})
			},
			selectNum(e){
				console.log(e)
				let index=e.detail.value
				this.num=this.list[index].label
				this.numValue = this.list[index].label.split('次')[0]
				this.counsellingTimes = this.list[index].value
				this.price = this.numValue * this.timeValue * this.orderDetail.auditParentPrice
			},
			selecTime(e){
				let index=e.detail.value
				this.counsellingDuration = this.list1[index].value
				this.timeValue =  this.list1[index].label.split('次')[1].split('小')[0]
				this.time =  this.list1[index].label
				this.price = this.numValue * this.timeValue * this.orderDetail.auditParentPrice
			},
			confirm(e) {
				console.log(e);
				this.num = e[0].label
				this.numValue = e[0].label.split('次')[0]
				this.counsellingTimes = e[0].value
				this.price = this.numValue * this.timeValue * this.orderDetail.auditParentPrice
			},
			confirm1(e) {
				this.counsellingDuration = e[0].value
				this.timeValue = e[0].label.split('次')[1].split('小')[0]
				// this.price = time * 10;
				this.time = e[0].label
				this.price = this.numValue * this.timeValue * this.orderDetail.auditParentPrice
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef !important;
	}

	.sel {
		padding: 0 20rpx 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 199rpx;
		height: 73rpx;
		background: #FFFFFF;
		border: 1px solid #DCDCDC;
		border-radius: 10rpx;

		text {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	/deep/.u-checkbox-group {
		width: 36rpx !important;
	}

	.color {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.dark {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.orgin {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF6D56;
	}



	.form {
		width: 100%;
		position: absolute;
		top: 27%;

		.danger {
			margin-top: 45rpx;
			height: 97rpx;
			background: #F3E6E9;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #E33D65;
			text-align: center;
			line-height: 97rpx;
		}

		.pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			height: 149rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 13rpx 32rpx 0rpx rgba(182, 181, 181, 0.23);

			.dopay {
				width: 211rpx;
				height: 70rpx;
				background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
				border-radius: 35rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				text-align: center;
				line-height: 70rpx;
			}
		}

		.order {
			padding: 0 35rpx;
			// height: 1172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 13rpx 95rpx 0rpx rgba(182, 181, 181, 0.23);
			border-radius: 20rpx;

			.name {
				display: flex;
				// align-items: center;
				padding: 64rpx 0 46rpx;
				height: 228rpx;
				border-bottom: 1rpx solid #eee;

				.names {
					margin-top: 16rpx;
				}

				p {
					margin-top: 20rpx;
					font-size: 23rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}

			.orderInduce {
				padding-top: 47rpx;

				h5 {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}

			.list {
				height: 119rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #eee;
			}
		}
	}
</style>